<template>
	<!-- loading_main -->
	<view :class="['main loading_main']">
		<!-- #ifndef MP-TOUTIAO -->
		<!-- <nav-bar ref="navRef" title="蜗牛丁AI"></nav-bar> -->
		<!-- #endif -->
		<view class="tip"></view>
		<view class="tip_a">等待约 22 秒即可生成</view>

		<view class="container">
			<view class="loading_swp flex_center">
				<view class="swiper-item-child">
					<image :src="dataList[0].url" mode="aspectFit"></image>
					<view class="swp_img_mask">35%</view>
				</view>
			</view>
			<swiper class="swiper" :indicator-dots="false" :autoplay="false" :interval="2000" :duration="1000" circular :current="current" @change="changeSwp">
				<swiper-item class="swiper-item flex_center" v-for="(item, idx) in dataList" :key="idx">
					<view class="swiper-item-child">
						<image :src="item.url" mode="aspectFit"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="progress">
				<view class="">
					<u-line-progress :percent="70" :height="16" :round="false" striped-active active-color="#fff" inactive-color="rgba(0,0,0,0.5)"></u-line-progress>
				</view>
			</view>
		</view>
		<view class="dot">
			<view :class="['dot_item', current === idx ? 'act_dot_item' : '']" v-for="(item, idx) in dataList" :key="idx"></view>
		</view>

		<view class="footer">
			<scroll-view scroll-x class="button_scroll">
				<view class="button_row">
					<view class="button" v-for="(item, idx) in buttons" :key="idx">
						<image :src="item.url" mode=""></image>
						<view class="">{{ item.name }}</view>
					</view>
				</view>
			</scroll-view>
			<view class="btns flex_bw">
				<view class="btn">
					<image :src="$imgsUrl('0x72507018')" mode=""></image>
					<view class="">对比</view>
				</view>
				<view class="btn">
					<image :src="$imgsUrl('0x72507019')" mode=""></image>
					<view class="">下载</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: 0,
			dataList: [
				{
					url: "https://pic1.zhimg.com/v2-a58fa2ab84be291418da2652805f8270_b.jpg"
				},
				{
					url: "https://pic1.zhimg.com/v2-a58fa2ab84be291418da2652805f8270_b.jpg"
				}
			],
			buttons: [
				{
					url: this.$imgsUrl("0x725070110"),
					name: "产品替换"
				},
				{
					url: this.$imgsUrl("0x72507017"),
					name: "材质替换"
				},
				{
					url: this.$imgsUrl("0x72507016"),
					name: "家具背景替换"
				}
			]
		};
	},
	onLoad() {},
	methods: {
		changeSwp(e) {
			this.current = e.detail.current;
		}
	}
};
</script>

<style lang="less" scoped>
.main {
	width: 100vw;
	min-height: 100vh;
	background-color: #010101;
	color: #fff;
	padding-bottom: calc(310rpx + env(safe-area-inset-bottom) / 2);
	.loading_swp {
		display: none;
		width: 100%;
		height: 100%;
	}
	.tip {
		padding-bottom: 38rpx;
	}
	.tip_a {
		display: none;
		padding: 154rpx 0 76rpx 0;
		font-size: 26rpx;
		text-align: center;
	}
}
.main.loading_main {
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom) / 2);
	.loading_swp {
		display: flex;
	}
	.tip_a {
		display: block;
	}
	.tip,
	.progress,
	.swiper,
	.dot,
	.footer {
		display: none;
	}
}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	font-size: 28rpx;
	color: #fff;
	padding: 0 36rpx calc(52rpx + env(safe-area-inset-bottom) / 2) 36rpx;
	.btns {
		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			width: 50%;
			image {
				width: 46rpx;
				height: 46rpx;
				margin-bottom: 8rpx;
			}
		}
	}
	.button_scroll {
		white-space: nowrap;
		padding-bottom: 50rpx;
	}
	.button_row {
		display: flex;
		color: rgba(255, 255, 255, 0.87);
		:last-child.button {
			margin-right: 0;
		}
		.button {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #333a40;
			padding: 0 24rpx;
			line-height: 92rpx;
			border-radius: 16rpx;
			margin-right: 16rpx;
			// margin-top: -4rpx;
			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 12rpx;
			}
			view {
				display: inline-block;
			}
		}
	}
}

.dot {
	width: 100%;
	padding-top: 24rpx;
	display: flex;
	justify-content: center;
	:last-child.dot_item {
		margin-right: 0;
	}
	.dot_item {
		width: 16rpx;
		height: 16rpx;
		margin-right: 8rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.25);
		transition: all 0.2s;
	}
	.act_dot_item {
		width: 38rpx !important;
		background-color: #fff !important;
		border-radius: 38rpx;
	}
}

.swp_img_mask {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	font-size: 62rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.progress {
	position: absolute;
	bottom: -9rpx;
	left: 0;
	width: 100%;
	display: none;
}
.container {
	margin: 0 31rpx 0 31rpx;
	width: calc(100vw - 62rpx);
	height: 836rpx;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 16rpx;
	position: relative;
	overflow: hidden;

	.swiper-item-child {
		width: 100%;
		height: 396rpx;
		position: relative;
	}
	.swiper {
		width: 100%;
		height: 100%;

		.swiper-item {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
